<template>
  <div class="data-table">
    <ul :class="isBig ? 'bigShow' : ''">
      <li>
        <p class="top time">时间</p>
        <p class="top data">{{ endName }}</p>
      </li>
      <li v-for="(item, index) in endData" :key="index">
        <p class="time">{{ item.time }}</p>
        <p class="data">{{ item.data }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['data', 'dataType', 'isBig'],
  data() {
    return {
      endData: [],
      endName: ''
    }
  },
  mounted() {
    this.initData()
  },
  watch: {
    // 监听data变化
    data: {
      deep: true,
      handler(val) {
        this.initData()
      }
    },
    // 监听偏移量和距离量的转换
    dataType: {
      deep: true,
      handler(val) {
        if (val) {
          this.endData = this.data.length ? this.data.map(item => {
            return {
              time: item.createTime,
              data: (item.distance - this.data[0].distance).toFixed(2)
            }
          }) : []
          this.endName = '偏移量'
        } else {
          this.endData = this.data.length ? this.data.map(item => {
            return {
              time: item.createTime,
              data: (item.distance).toFixed(2)
            }
          }) : []
          this.endName = '距离量'
        }
      }
    }
  },
  methods: {
    initData() {
      if (this.dataType) {
        this.endData = this.data.length ? this.data.map(item => {
          return {
            time: item.createTime,
            data: (item.distance - this.data[0].distance).toFixed(2)
          }
        }) : []
        this.endName = '偏移量'
      } else {
        this.endData = this.data.length ? this.data.map(item => {
          return {
            time: item.createTime,
            data: (item.distance).toFixed(2)
          }
        }) : []
        this.endName = '距离量'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.data-table {
  width: 100%;
  ul {
    width: 100%;
    height: 240px;
    overflow: auto;
    list-style: none;
    margin: 50px auto 10px;
    padding: 0;
    border: 1px solid #39465A;
    li {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      line-height: 23px;
      p {
        font-size:12px;
        font-weight:400;
        color:rgba(169,184,226,1);
        text-align: center;
        letter-spacing: 1px;
        padding: 5px 0;
        margin: 0;
      }
      .top {
        font-size:14px;
      }
      .time {
        width: 70%;
      }
      .data {
        width: 29%;
        border-left: 1px solid #39465A;
      }
    }
  }
  .bigShow {
    height: 550px;
    border: 1px solid #9AA9BE;
    margin-bottom: 50px;
    .data {
      border-left: 1px solid #9AA9BE;
    }
  }
}
</style>